import { createFileRoute, Link } from '@tanstack/react-router'
import { motion } from 'framer-motion'

function Index() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-rose-50 to-orange-50">

      {/* 主要内容 */}
      <div className="container mx-auto px-4 py-12">
        {/* 欢迎区域 */}
        <div className="text-center mb-16">
          <h1 className="text-6xl font-serif font-bold text-gray-800 mb-6">
            欢迎来到我们的爱情博客
          </h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
            这里记录着我们相遇、相知、相爱的每一个美好瞬间
            <br />
            每一个故事，每一份回忆，都是我们爱情最珍贵的见证
          </p>
          <div className="mt-8 flex justify-center space-x-4">
            <div className="text-4xl animate-bounce">💕</div>
            <div className="text-4xl animate-bounce" style={{animationDelay: '0.1s'}}>✨</div>
            <div className="text-4xl animate-bounce" style={{animationDelay: '0.2s'}}>🌸</div>
          </div>
        </div>

        {/* 栏目卡片 - 增强动画效果 */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
          <motion.div
            whileHover={{ 
              scale: 1.05, 
              y: -10,
              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
            }}
            whileTap={{ scale: 0.95 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
          >
            <Link 
              to="/our-story"
              className="block bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg h-full"
            >
              <div className="text-center">
                <motion.div 
                  className="text-5xl mb-4"
                  whileHover={{ 
                    scale: 1.2, 
                    rotate: [0, -10, 10, 0],
                    transition: { duration: 0.5 }
                  }}
                >
                  💖
                </motion.div>
                <h3 className="text-xl font-semibold text-gray-800 mb-3">我们的故事</h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  从相遇的那一刻开始，记录我们爱情路上的每一个重要时刻
                </p>
              </div>
            </Link>
          </motion.div>

          <motion.div
            whileHover={{ 
              scale: 1.05, 
              y: -10,
              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
            }}
            whileTap={{ scale: 0.95 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
          >
            <Link 
              to="/daily-sweetness"
              className="block bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg h-full"
            >
              <div className="text-center">
                <motion.div 
                  className="text-5xl mb-4"
                  whileHover={{ 
                    scale: 1.2, 
                    rotate: [0, 15, -15, 0],
                    transition: { duration: 0.6 }
                  }}
                >
                  🌻
                </motion.div>
                <h3 className="text-xl font-semibold text-gray-800 mb-3">生活小确幸</h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  平凡日子里的温暖瞬间，那些让我们会心一笑的甜蜜时光
                </p>
              </div>
            </Link>
          </motion.div>

          <motion.div
            whileHover={{ 
              scale: 1.05, 
              y: -10,
              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
            }}
            whileTap={{ scale: 0.95 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
          >
            <Link 
              to="/bucket-list"
              className="block bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg h-full"
            >
              <div className="text-center">
                <motion.div 
                  className="text-5xl mb-4"
                  whileHover={{ 
                    scale: 1.2, 
                    y: [-5, 5, -5],
                    transition: { duration: 0.4, repeat: 2 }
                  }}
                >
                  ✨
                </motion.div>
                <h3 className="text-xl font-semibold text-gray-800 mb-3">未来约定</h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  我们想要一起完成的事情，对未来美好生活的共同期盼
                </p>
              </div>
            </Link>
          </motion.div>

          <motion.div
            whileHover={{ 
              scale: 1.05, 
              y: -10,
              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
            }}
            whileTap={{ scale: 0.95 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
          >
            <Link 
              to="/love-letters"
              className="block bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg h-full"
            >
              <div className="text-center">
                <motion.div 
                  className="text-5xl mb-4"
                  whileHover={{ 
                    scale: 1.2, 
                    rotate: [0, 20, -20, 0],
                    transition: { duration: 0.5 }
                  }}
                >
                  💌
                </motion.div>
                <h3 className="text-xl font-semibold text-gray-800 mb-3">情书便签</h3>
                <p className="text-gray-600 text-sm leading-relaxed">
                  写给彼此的情书和小纸条，最直接真挚的爱意表达
                </p>
              </div>
            </Link>
          </motion.div>
        </div>

        {/* 最新动态 */}
        <div className="mt-16 max-w-4xl mx-auto">
          <h2 className="text-3xl font-serif font-bold text-center text-gray-800 mb-8">
            最近的甜蜜时光 🥰
          </h2>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-white/80 backdrop-blur-sm rounded-xl p-6 shadow-lg">
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-lg font-medium text-gray-700">今天的小惊喜</h3>
                <span className="text-sm text-gray-500">刚刚</span>
              </div>
              <p className="text-gray-600 leading-relaxed">
                她为我准备了我最爱的奶茶，还在杯子上贴了一个小爱心贴纸 💕
              </p>
            </div>
            
            <div className="bg-white/80 backdrop-blur-sm rounded-xl p-6 shadow-lg">
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-lg font-medium text-gray-700">新的约定</h3>
                <span className="text-sm text-gray-500">昨天</span>
              </div>
              <p className="text-gray-600 leading-relaxed">
                我们约定要一起学做蛋糕，为彼此的生日准备特别的惊喜 🎂
              </p>
            </div>
          </div>
        </div>

        {/* 爱的宣言 */}
        <div className="mt-16 text-center">
          <div className="bg-gradient-to-r from-pink-400 to-rose-400 text-white rounded-2xl p-8 max-w-2xl mx-auto shadow-xl">
            <h2 className="text-2xl font-serif font-bold mb-4">我们的爱情宣言</h2>
            <p className="text-lg leading-relaxed opacity-90">
              "愿我们的爱情如这博客一样，记录着每一个美好的瞬间，
              <br />
              无论时光如何流转，这些珍贵的回忆永远闪闪发光 ✨"
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export const Route = createFileRoute('/')({
  component: Index,
})
